<template>
  <view v-if="listData.length > 0" class="grid-body mt-30">
    <view class="check grid-common" v-for="(item, i) in listData" :key="`${item.alarmType}-${item.id}`">
      <view class="title flex">
        <image class="icon-style" src="/static/images/message/tishi.png" mode="aspectFill"></image>
        {{ item.title }}
      </view>
      <view class="flex text"
        >报警时间：
        <text>{{ item.alarmTime || '--' }}</text>
      </view>
      <view class="flex text"
        >报警内容：
        <text>{{ item.alarmContent || '--' }}</text>
      </view>
      <view class="flex text">
        {{ alarmSourceText(item) }}：
        <text>{{ item.alarmPersonnel || '--' }}</text>
      </view>

      <view class="footer-wrap">
        <view class="content-wrap"> </view>
        <view class="button-wrap">
          <view v-if="status === 0" class="button" @click="goHandle(item)">处理</view>
          <view class="button" @click="goDetail(item)">查看</view>
        </view>
      </view>
    </view>
  </view>
  <view v-else><empty></empty></view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
export default {
  name: 'BookList',
  components: {
    Empty
  },
  props: {
    listData: {
      type: Array,
      default: []
    },
    status: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    alarmSourceText({ alarmType }) {
      return alarmType === 'over_speed_alarm' ? '触警车辆' : '触警人员'
    },
    goDetail({ id, alarmMainType, title }) {
      uni.navigateTo({
        url: `/pages/work/alarm-info/detail?id=${id}&name=${title}&isGather=${alarmMainType === '3'}` // 0: 其他报警,1: 聚集报警
      })
    },
    goHandle({ id, alarmMainType, title }) {
      uni.navigateTo({
        url: `/pages/work/alarm-info/form?id=${id}&name=${title}&isGather=${alarmMainType === '3'}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-wrap {
  display: flex;
  background-color: #fff;

  view {
    position: relative;
    width: 35%;
    height: 38rpx;
    line-height: 38rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #999;
    text-align: right;
    margin-bottom: 32rpx;
  }

  .active {
    background: #454a5e;
    color: #fff;

    &::after {
      content: '';
      position: absolute;
      right: 24rpx;
      bottom: -12rpx;
      height: 6rpx;
      width: 30rpx;
      background-color: #454a5e;
    }
  }
}
.grid-body {
  background-color: transparent;
}

.grid-common {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 76%;
      color: #333;
      display: inline-block;

      &.text-grey {
        color: #999;
      }
      &.w-50 {
        width: 50%;
      }
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}

.info-btn {
  margin-left: 10px;
}
</style>
